<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>


    <script>

        // 这里还是写比较重要的js部分

        // 首先还是用户名注册的判断，必须大于8个数字
        function judgeUsername(){
            if ( $("#username").val().length < 8 ){
                // 用户名不合法
                $("#username").css("border","1px solid red");
                return false;
            }else {
                // 用户名正确
                $("#username").css("border","1px solid green");
                return true;
            }
        }

        // 接着是判断注册的密码是否符合规范
        function judgePassword(){
            if( $("#password").val().length < 8 ){
                // 需要注册的密码不合法
                $("#password").css("border","1px solid red");
                return false;
            }else {
                // 需要注册的密码合法
                $("#password").css("border","1px solid green");
                return true;
            }
        }

        // 接着是判断输入的邮箱格式是否正确，这个需要用到正则表达式
        function judegEmail(){
            // 首先定义正则表达式
            var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
            if (patten.test($("#email").val())){
                $("#email").css("border","1px solid green");
                return true;
            }else {
                $("#email").css("border","1px solid red");
                return false;
            }
        }

        // console.log($("#accept").is(":checked"));

        // 判断单选框有没有选上
        function judegAccept(){
            // 如果选上了返回true，如果没有选上，返回false
            return $("#accept").is(":checked");
        }

        // 在这里进行总的判断
        $(function(){

            $("#regist").submit(function(){

                if(judegEmail() && judgeUsername() && judgePassword()){
                    // 只有这三个都是绿框也就是都满足条件的时候，才能点击注册
                    // 如果不满足这三个条件则不作响应
                    $.ajax({
                        url:"",
                        data:$("#registForm").serialize(),
                        dataType:"json",
                        type:"post",
                        success:function(data){
                            // 如果成功，这里是对返回数据的处理
                        },
                        error:function(){
                            // 如果失败，那么执行这个函数进行处理
                        }
                    })
                }

                // 如果不满足上面三个条件，那么返回false
                return false;

            })

            // 这里是当我们的用户名和密码还有邮箱输入框失去焦点的时候，进行判断填入的内容是否符合要求
            $("#username").blur(judgeUsername);
            $("#password").blur(judgePassword);
            $("#email").blur(judegEmail);

        })

    </script>

    <!-- 这里写一个注册页面 -->
    <div class="register w">
        
        <!-- 下面开始写注册页面 -->
        <div class="background">

            <!-- 首先是注册的头部 -->
            <div class="register_head">
                <h3>Sign Up</h3>
                <p>Want to sign up fill out this form!</p>
            </div>

            <!-- 下面是表单部分 -->
            <form action="" id="registForm">

                <!-- 用户名 -->
                <input type="text" id="username" placeholder="请输入您要设定大于8位的用户名">

                <!-- 注册密码 -->
                <input type="text" id="password" placeholder="请输入您要设定的大于8位数的密码">

                <!-- 注册用的邮箱 方便找回密码 -->
                <input type="text" id="email" placeholder="请输入您的邮箱，用于验证和密码找回">

                <!-- 验证码 -->
                <input type="text" id="validated_code" placeholder="请检查您的邮箱，并输入验证码">

                <!-- 接着是个单选框 用来接受条款 -->
                <input type="radio" id="accept">
                <a href="#">接受服务条款</a>

                <!-- 最后一个是注册按钮 -->
                <input type="submit" id="regist" value="sign up">

            </form>

        </div>

    </div>
    
</body>
</html>